<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OA模拟与实现</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"></link>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style>
        .img{
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ol class="breadcrumb">
            <li><a th:href="@{~/router/index.html}" target="main">首页</a></li>
            <li class="active">我的</li>
          </ol>
        <div class="panel panel-info">
            <div class="panel-heading">我的</div>
        </div>
        <div class="panel-body">
                <hr>
            <form action="/user/updateSelf" target="main" method="post" enctype="multipart/form-data" class="form-inline align-self-center">
                <input type="hidden" name="oid" th:value="${session.people.oid}"/>
                <div>
                    <label for="dname">姓名：</label>
                    <input th:value="${session.people.oname}" name="oname" id="dname"/>
                </div>
                <div class="">
                    <label for="ident"><span>身份：</span></label>
                    <input th:value="${session.people.pid.positionname}" type="text" id="ident" value="" disabled>
                </div>
                <div>
                    <label for="img">更换头像：</label>
                    <input type="file" name="file" id="img"/>
                    <div>
                        <img th:src="'/img/'+${session.people.img}" alt="" class="img img-circle">
                    </div>
                    
                </div>
                <div >
                    <label for="oldpwd">旧密码：</label>
                    <input type="password" th:value="${session.people.opassword}" name="oldpwd" id="oldpwd" disabled/>
                </div>
                <input type="hidden" id="op" name="opassword" th:value="${session.people.opassword}"/>
                <div >
                    <label for="newpwd">新密码：</label>
                    <input type="password" name="newpwd" id="newpwd"/>
                    <span id="alert"></span>
                </div>
                <div class="">
                    <div class="">
                        <button type="submit" class="btn btn-info">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
</body>
<script>
    $(function(){
        $("#newpwd").blur(function(){
            var newpwd = $(this).val();
            var oldpwd = $("#oldpwd").val();
            if(newpwd==oldpwd){
                $("#alert").css({"color":"red"}).text("新密码不能与旧密码相同");
                $(this).val("");
            }else if(newpwd!=""){
                if(newpwd.length>=3){
                    $("#op").val(newpwd);
                }else{
                    $("#alert").css({"color":"red"}).text("密码需要最低三位")
                }
            }
        })
        $("#newpwd").focus(function(){
            $("#alert").text("");
        })
    })
</script>
</html>